<template>
  <el-table
    :data="tableData"
    @row-click="rowClick"
    style="width: 100%"
    size="large"
    height="100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column v-if="!selection" type="selection" width="55" />
    <el-table-column
      v-for="item in tableHeader"
      :key="item.map"
      :prop="item.map"
      :label="item.title"
      :sortable="item.sortable"
      :align="item.align || null"
      :width="item.width"
    />
    <slot />
  </el-table>
</template>
<script setup>
const props = defineProps({
  tableHeader: {
    type: Array,
    default: [],
  },
  tableData: {
    type: Array,
    default: [],
  },
  selection: {
    default: true,
  },
});
const emits = defineEmits(["rowClick", "selection-change"]);
const rowClick = () => {
  emits("rowClick");
};
const handleSelectionChange = (val) => {
  emits("selection-change", val);
};
</script>
<style scoped lang="scss">
.el-table {
  --el-text-color-regular: #000;
  --el-text-color-secondary: #000;
  --el-table-header-bg-color: #fafafa;
  --el-table-row-hover-bg-color: rgba(96, 66, 220, 0.08);
}
</style>
